<!-- 首页 -->
<template>
	<!-- 头部 -->
	<view class="search-back" :style=" 'height:' + custom_height + 'px;' ">
		<!-- 用一个 view 占据位置，让搜索框和胶囊对齐 -->
		<view :style=" 'height:' + search_top + 'px;' "></view>
		<view class="search-input" :style="['height:' + search_height + 'px;', 'width:' + search_left + 'px;' ]">
			<image src="/static/images/search.png" mode="widthFix"></image>
			<input @click="goSearch" type="text" :style=" 'height:' + search_height + 'px;' " placeholder="请输入搜索的商品" disabled>
		</view>
	</view>
	<!-- 避免自定义导航栏的固定定位导致后续布局混乱 -->
	<view :style=" 'height:' + custom_height + 'px;' "></view>

	<!-- 轮播横幅  -->
	<Swiper style="height: 340rpx;" :banner="banner"></Swiper>

	<!-- 秒杀子组件 -->
	<Sckill :seckill="seckill"></Sckill>

	<!-- 商品列表 -->
	<Card :card="card"></Card>

	<!-- 上拉加载的提示 -->
	<view class="loading-height">
		<!-- 商品数据 已经显示完之后 提示 -->
		<view class="text" v-if="!loading"> ---我是有底线的---</view>
		<Loading v-if="loading"></Loading>
	</view>



</template>

<script setup>
	import { onMounted, reactive, toRefs, ref } from 'vue'
	import { onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app'
	// 引入轮播组件
	import Swiper from '@/pages/index/child/swiper.vue'
	import Sckill from '@/pages/index/child/daily-seckill.vue'
	import Card from '@/components/card-goods.vue'
	import Loading from '@/components/loading.vue'

	// 获取胶囊按钮的坐标数据 展示数据
	const data = reactive({
		search_height: 0, // 胶囊本身的高度
		search_top: 0, // 胶囊按钮距离顶部的高度
		search_left: 0, // 搜索框宽度 （胶囊按钮距离最左边的距离 - 30）
		custom_height: 0, //自定义导航栏的高度
		banner: [], // 存储请求的轮播数据
		seckill: [], // 存储请求的秒杀数据
		card: [], // 存储商品列表
		loading: false, // 上拉提示小圆圈
		pageNum: 0, // 请求的页数，每请求一次，页数 +1
	})
	const { search_height, search_top, search_left, custom_height, banner, seckill, card, loading,totalGoodCount } = toRefs(data)

	onMounted(() => {
		capsule()
		goods()
	})
	
	onPullDownRefresh(()=>{
		goods()
	})

	// 1、获取胶囊按钮的位置信息
	function capsule() {
		// #ifndef APP-PLUS || H5 || MP-ALIPAY
		// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// console.log("menuButtonInfo", menuButtonInfo);
		data.search_height = menuButtonInfo.height
		data.search_top = menuButtonInfo.top
		data.search_left = menuButtonInfo.left - 30
		data.custom_height = menuButtonInfo.height + menuButtonInfo.top + 5
		// #endif
	}

	// 2、请求数据
	const db = wx.cloud.database()
	const _ = db.command
	async function goods() {
		// 从数据库获取所有轮播横幅数据
		const banner = await db.collection('banner').get()

		// 从数据库获取所有秒杀数据
		const seckill = await db.collection('seckill')
		.where({
			seckill_time:{end_Time:_.gt(Date.now())}
		})
		.field({
			seckill_time: false // 不返回秒杀的时间
		}).get()
		
		// console.log(seckill);

		// 获取商品数据前十条
		const card = await db.collection('goods').where({
			shelves: true // 仅查询上架商品
		}).limit(10).field({
			goods_cover: true,
			goods_price: true,
			goods_title: true,
			sold: true,
			video_url: true
		}).orderBy('sold', 'desc').get() // 通过已售降序排列

		// 等 banner seckill card 都成功才赋值，避免页面一部分一部分的展示
		Promise.all([banner, seckill, card])
			.then(res => {
				// console.log("res",res);
				data.banner = res[0].data
				data.seckill = res[1].data
				data.card = res[2].data	
			})
			.catch(err => {
				console.log(err)
			})
		uni.stopPullDownRefresh()
	}

	// 3、对商品列表上拉加载
	onReachBottom(async () => { //onReachBottom只能在父组件才能触底
		data.loading = true
		data.pageNum++
		let skip = data.pageNum * 10 // 跳过前面多少条开始获取
		const res_goods = await db.collection('goods').where({
			shelves: true
		}).limit(10).skip(skip).field({
			goods_cover: true,
			goods_price: true,
			goods_title: true,
			sold: true, // 已售多少件也要返回
			video_url: true
		}).orderBy('sold', 'desc').get()
		data.card = [...data.card, ...res_goods.data]
		data.loading = false
	})

	// 4、点击搜索
	function goSearch() {
		uni.navigateTo({
			url: "/pages/search/search"
		})
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	/* 首页自定义搜索框 */
	.search-back {
		/* background-color: #4CD964; */
		background-color: #e94b37;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.search-input {
		background: #FFFFFF;
		border-radius: 50rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		flex: 1;
		position: relative;
	}

	.search-input input {
		width: 100%;
		font-size: 30rpx;
		color: #b2b2b2;
		padding-left: 80rpx;
	}

	.search-input image {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		left: 30rpx;
		align-self: center;
	}
	
	/* 商品上拉完显示所有的数据之后的提示文字 */
	.text{
		color: #999;
		font-size: 30rpx;
	}
</style>
